import 'package:afun_flutter/controllers/animatiions_controller.dart';
import 'package:afun_flutter/controllers/index_controller.dart';
import 'package:afun_flutter/controllers/order_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class IndexPage extends StatelessWidget {
  const IndexPage({super.key});

  @override
  Widget build(BuildContext context) {
    final IndexController controller = Get.put(IndexController());
    final AnimationPingYiController switchAnimation =
        Get.put(AnimationPingYiController());

    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Align(
          child: Text("菜单",
              style: TextStyle(
                  fontFamily: 'ShuHeiTiBold',
                  fontSize: 40.r,
                  fontWeight: FontWeight.w600)),
        ),
        backgroundColor: Colors.white,
        bottom: PreferredSize(
            preferredSize: Size.fromHeight(120.h),
            child: SizedBox(
              width: double.infinity,
              height: 120.h,
              child: Column(
                children: [
                  Row(
                    children: [
                      SizedBox(
                        width: 35.w,
                      ),
                      Icon(
                        Icons.location_on_outlined,
                        size: 55.r,
                      ),
                      Text("长沙市岳麓区店",
                          style: TextStyle(
                              fontFamily: 'ShuHeiTiBold',
                              fontSize: 36.r,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.w400)),
                      Icon(
                        Icons.arrow_forward_ios_outlined,
                        color: const Color.fromRGBO(178, 178, 178, 1),
                        size: 36.r,
                      ),
                      const Spacer(),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 10.w, horizontal: 6.h),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(44.r),
                            border: Border.all(
                                color: const Color.fromRGBO(234, 234, 234, 1),
                                width: 2.r,
                                style: BorderStyle.solid),
                            color: const Color.fromRGBO(246, 246, 246, 1)),
                        child: Stack(
                          children: [
                            GetBuilder<AnimationPingYiController>(
                              builder: (_) {
                                return Positioned(
                                  child: Container(
                                    width: 99.w,
                                    height: 50.h,
                                    decoration: BoxDecoration(
                                      gradient: const RadialGradient(
                                        //背景径向渐变
                                        colors: [
                                          Color.fromRGBO(255, 87, 98, 1),
                                          Color.fromRGBO(255, 121, 98, 1)
                                        ],
                                        center: Alignment.centerRight,
                                      ),
                                      borderRadius:
                                          BorderRadius.circular(30.r), // 设置圆角半径
                                    ),
                                  ),
                                  left: _.animation.value,
                                );
                              },
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.start,
                              children: <Widget>[
                                GestureDetector(
                                  onTap: () {
                                    controller.foodTypeChange(0);
                                    switchAnimation.reverseAnimation();
                                  },
                                  child: SizedBox(
                                    width: 99.w,
                                    height: 50.h,
                                    child: Align(
                                        alignment: Alignment.center,
                                        child: Obx(
                                          () => Text('外卖',
                                              style: TextStyle(
                                                  fontSize: 28.r,
                                                  fontWeight: FontWeight.w700,
                                                  color: controller
                                                              .foodType.value ==
                                                          0
                                                      ? Colors.white
                                                      : const Color.fromRGBO(
                                                          153, 153, 153, 1))),
                                        )),
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    controller.foodTypeChange(1);
                                    switchAnimation.play();
                                  },
                                  child: SizedBox(
                                    width: 99.w,
                                    height: 50.h,
                                    child: Align(
                                        alignment: Alignment.center,
                                        child: Obx(
                                          () => Text('自提',
                                              style: TextStyle(
                                                  fontSize: 28.r,
                                                  fontWeight: FontWeight.w700,
                                                  color: controller
                                                              .foodType.value ==
                                                          1
                                                      ? Colors.white
                                                      : const Color.fromRGBO(
                                                          153, 153, 153, 1))),
                                        )),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(
                        width: 20.w,
                      )
                    ],
                  ),
                  Container(
                    width: double.infinity,
                    padding: EdgeInsets.only(left: 77.w),
                    child: Text("距离您25.8km",
                        style: TextStyle(
                            fontSize: 26.r,
                            color: const Color.fromRGBO(153, 153, 153, 1))),
                  )
                ],
              ),
            )),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Row(
              children: [
                Container(
                  width: 180.w,
                  child: Obx(() => ListView(
                        children: controller.leftList
                            .asMap()
                            .entries
                            .map((entry) {
                          int index = entry.key;
                          String item = entry.value;
                          return GestureDetector(
                            onTap: () {
                              controller.leftCurrentChange(index);
                            },
                            child: Container(
                              height:
                                  index == controller.leftCurrentIndex.value
                                      ? 120.h
                                      : 99.h,
                              decoration: BoxDecoration(
                                  color: index ==
                                          controller.leftCurrentIndex.value
                                      ? Colors.white
                                      : Colors.transparent,
                                  border: index ==
                                          controller.leftCurrentIndex.value
                                      ? Border(
                                          left: BorderSide(
                                              width: 9.w,
                                              color: Colors.red))
                                      : null),
                              child: Align(
                                child: Text('$item',
                                    style: TextStyle(
                                      fontSize: 32.r,
                                      fontWeight: FontWeight.w600,
                                      color: const Color.fromRGBO(
                                          153, 153, 153, 1),
                                    )),
                              ),
                            ),
                          );
                        }).toList(),
                      )),
                ),
                Expanded(
                  child: Container(
                    color: Colors.white,
                    padding: EdgeInsets.only(left: 35.w, right: 35.w),
                    child: Obx(() => ListView.builder(
                          controller: controller.rightScrollController,
                          itemCount: controller.rightList.length,
                          itemBuilder: (context, index) {
                            final item = controller.rightList[index];
                            return Column(
                              key: controller.rightKeys[index],
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                SizedBox(
                                  height: 15.h,
                                ),
                                Container(
                                  child: Text(
                                    item['label'],
                                    style: TextStyle(
                                        fontFamily: 'ShuHeiTiBold',
                                        fontSize: 36.r,
                                        color: Colors.black),
                                  ),
                                ),
                                SizedBox(
                                  height: 8.h,
                                ),
                                ListView.builder(
                                  shrinkWrap: true,
                                  //防止子列表无限高度,
                                  physics:
                                      const NeverScrollableScrollPhysics(),
                                  //禁止子列表单独滚动
                                  itemCount: item['list'].length,
                                  itemBuilder: (context, subIndex) {
                                    final items = item['list'][subIndex];
                                    return Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        ClipRRect(
                                          child: Image(
                                            image: NetworkImage(
                                                items['image']),
                                            width: 140.w,
                                            height: 140.h,
                                            errorBuilder: (context, error, stackTrace) => Column(
                                              children: <Widget>[
                                                Text("图片加载错误", style: TextStyle(
                                                  fontSize: 22.r,
                                                  color: Colors.black
                                                ),)
                                              ],
                                            ),
                                            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
                                              if (loadingProgress == null) return child; // 图片加载完毕，返回图片本身
                                              return Center(
                                                child: CircularProgressIndicator(
                                                  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),  // 明显的颜色
                                                  strokeWidth: 5.0,  // 较粗的线条
                                                ), // 显示加载指示器
                                              );
                                            },
                                          ),
                                          borderRadius:
                                              BorderRadius.circular(35.r),
                                        ),
                                        SizedBox(
                                          width: 25.w,
                                        ),
                                        Expanded(
                                          flex: 1,
                                          child: Container(
                                            height: 140.h,
                                            child: Column(
                                              children: <Widget>[
                                                SizedBox(
                                                  height: 10.h,
                                                ),
                                                Text(items['name'],
                                                    style: TextStyle(
                                                        fontFamily:
                                                            'ShuHeiTiBold',
                                                        fontSize: 28.r,
                                                        color:
                                                            Color.fromRGBO(
                                                                51,
                                                                51,
                                                                51,
                                                                1))),
                                                SizedBox(
                                                  height: 5.h,
                                                ),
                                                Text(items['describe'],
                                                    style: TextStyle(
                                                        fontFamily:
                                                            'ShuHeiTiBold',
                                                        fontSize: 22.r,
                                                        color:
                                                            Color.fromRGBO(
                                                                153,
                                                                153,
                                                                153,
                                                                1))),
                                                SizedBox(
                                                  height: 24.h,
                                                ),
                                                Row(
                                                  crossAxisAlignment:
                                                      CrossAxisAlignment
                                                          .end,
                                                  children: [
                                                    Row(
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .end,
                                                      children: [
                                                        Text("￥",
                                                            style: TextStyle(
                                                                fontSize:
                                                                    22.r,
                                                                color: Colors
                                                                    .red)),
                                                        Text("22",
                                                            style: TextStyle(
                                                                fontSize:
                                                                    28.r,
                                                                color: Colors
                                                                    .red))
                                                      ],
                                                    ),
                                                    Spacer(),
                                                    GestureDetector(
                                                      onTap: () {
                                                        if(controller.isMaskVisible.value == false) {
                                                          controller.showMask1(index,subIndex);
                                                        }
                                                      },
                                                      child: Container(
                                                        child: const Icon(Icons.add, color: Colors.white),
                                                        decoration: BoxDecoration(
                                                            color: const Color
                                                                .fromRGBO(255,
                                                                96, 98, 1),
                                                            shape: BoxShape
                                                                .circle),
                                                      ),
                                                    )
                                                  ],
                                                )
                                              ],
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                            ),
                                          ),
                                        )
                                      ],
                                    );
                                  },
                                )
                              ],
                            );
                          },
                        )),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: ElevatedButton(onPressed: () {} , child: Text("按钮", style: TextStyle(fontSize: 22.r),),),
    );
  }
}
